<template>
  <div class="dictionary">
    <el-button  icon="el-icon-edit" type="primary" round @click="addjgdialogFormVisible= true">新增分支机构</el-button>
    <el-button  icon="el-icon-edit" type="primary" round @click="addfzdialogFormVisible= true">新增发展历程</el-button>
    <!-- 分支机构新增 -->
    <el-dialog title="分支机构新增" :visible.sync="addjgdialogFormVisible" @close="jgReset">
      <el-form :model="addjg" :rules="rules" ref="addjg">
        <el-form-item label="分支名称" :label-width="formLabelWidth" prop="m">
          <el-input v-model="addjg.m" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分支地址" :label-width="formLabelWidth" prop="d">
          <el-input v-model="addjg.d" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth" prop="l">
          <el-input v-model="addjg.l" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addjgdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="newlyaddedjg('addjg')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 发展历程新增 -->
    <el-dialog title="发展历程新增" :visible.sync="addfzdialogFormVisible" @close="fzReset">
      <el-form :model="addfz" :rules="rules" ref="addfz">
        <el-form-item label="历程年份" :label-width="formLabelWidth" prop="s">
          <el-input v-model="addfz.s" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="历程内容" :label-width="formLabelWidth" prop="n">
          <el-input v-model="addfz.n" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addfzdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="newlyaddedfz('addfz')">确 定</el-button>
      </div>
    </el-dialog>
    <el-alert
    title="我是分支机构"
    type="info"
    :closable="false"
    center
    show-icon
    style="margin-top: 20px;">
  </el-alert>
    <!-- 分支机构 -->
    <el-table
    :data="jg"
    border
    style="width: 100%">
    <el-table-column 
      label="序号" 
      width="50" 
      type="index">
    </el-table-column>
    <el-table-column
      prop="m"
      label="名称"
      width="300">
    </el-table-column>
    <el-table-column
      prop="d"
      label="地址">
    </el-table-column>
    <el-table-column
      prop="l"
      label="联系电话"
      width="300">
    </el-table-column>
    <el-table-column label="操作" align='center'  width="150">
      <template slot-scope="scope">
        <el-button
          circle
          type="primary"
          icon="el-icon-edit"
          @click="jghandleEdit(scope.$index, scope.row)"
        ></el-button>
        <el-button
          circle
          type="danger"
          icon="el-icon-delete"
          @click="deletejg(scope.$index, scope.row)"
        ></el-button>
      </template>
      </el-table-column>
  </el-table>
  <el-alert
    title="我是发展历程"
    type="info"
    :closable="false"
    center
    show-icon
    style="margin-top: 20px;">
  </el-alert>
  <!-- 发展历程 -->
  <el-table border :data="fz" style="width: 100%">
      <el-table-column label="序号" width="50" type="index"></el-table-column>
      <el-table-column prop="s" label="历程年份" width="400"></el-table-column>
      <el-table-column prop="n" label="历程内容"></el-table-column>
      <el-table-column label="操作" align='center' width="150">
        <template slot-scope="scope" >
          <el-button
            circle
            type="primary"
            icon="el-icon-edit"
            @click="fzhandleEdit(scope.$index, scope.row)"
          ></el-button>
          <el-button
            circle
            type="danger"
            icon="el-icon-delete"
            @click="deletefz(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  <!-- 分支机构编辑框 -->
  <el-dialog title="分支机构编辑" :visible.sync="jgdialogFormVisible">
    <el-form :model="jgformData">
      <el-form-item label="分支名称" :label-width="formLabelWidth">
        <el-input v-model="jgformData.m" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="分支地址" :label-width="formLabelWidth">
        <el-input v-model="jgformData.d" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" :label-width="formLabelWidth">
        <el-input v-model="jgformData.l" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="jgdialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleCreateOrModify()">确 定</el-button>
    </div>
  </el-dialog>
  <!-- 发展历程编辑框 -->
  <el-dialog title="发展历程编辑" :visible.sync="fzdialogFormVisible">
    <el-form :model="fzformData">
      <el-form-item label="历程年代" :label-width="formLabelWidth">
        <el-input v-model="fzformData.s" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="历程内容" :label-width="formLabelWidth">
        <el-input v-model="fzformData.n" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="fzdialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="fzmodify()">确 定</el-button>
    </div>
  </el-dialog>
  <el-alert
    title="我是公司简介"
    type="info"
    :closable="false"
    center
    show-icon
    style="margin-top: 20px;">
  </el-alert>
  <!-- 公司简介 -->
  <el-input
  style="width: 50%;"
    type="textarea"
    :autosize="{ minRows: 2, maxRows: 10}"
    placeholder="请输入内容"
    v-model="gsjj">
  </el-input>
  <el-button style="margin-left:20px;" type="primary" @click="gsjjEdit">保存/取消保存</el-button>
  </div>
</template>

<script>
import qs from "qs"
export default {
  data () {
    return {
      // loading: true,
      formLabelWidth: "100px",
      tableData: {},
      jg: [], // 分支机构
      jgdialogFormVisible: false, // 分支机构编辑框flag值
      jgformData: {}, // 分支机构编辑框当前值
      fz: [], // 发展历程
      fzdialogFormVisible: false, // 发展历程编辑框flag值
      fzformData: {}, // 发展历程编辑框当前值
      gsjj: '', // 公司简介
      addjg: { // 新增分支机构数据
        m: '',
        d: '',
        l: ''
      },
      addjgdialogFormVisible: false, // 新增发展编辑框flag值
      addfz: { // 新增发展数据
        s: '',
        n: '',
      },
      addfzdialogFormVisible: false, // 新增发展编辑框flag值
      index: Number,
      rules: {
        m: [
          { required: true, message: '请输入分支名称', trigger: 'blur' }
        ],
        d: [
          { required: true, message: '请选择分支地址', trigger: 'blur' }
        ],
        l:[
          { required: true,message: '请输入手机号码',trigger: 'blur'},
          // {validator:function(rule,value,callback){
          //   if(/^1[34578]\d{9}$/.test(value) == false){
          //       callback(new Error("请输入正确的手机号"));
          //   }else{
          //       callback();
          //   }
          // }, trigger: 'blur'}
        ],
        s: [
          { required: true, message: '请选择历程年代', trigger: 'blur' }
        ],
        n: [
          { required: true, message: '请选择历程内容', trigger: 'blur' }
        ],
      }
    }
  },

  created () {
    this.homeData()
  },

  methods: {
    // 获取总数据
    async homeData(){
      // this.loading = true
      const { data: res } = await this.$http.get("/data/get",
        {params:{
            view: "系统后台",
            code: "wzxx",
            data: JSON.stringify({fz:1})
        }}
      )
      this.tableData = (JSON.parse(res.data));
      this.jg = this.tableData.jg;
      this.fz = this.tableData.fz;
      this.gsjj = this.tableData.jj;
      // console.log(this.fz);
      // console.log(this.jg);
      // console.log(this.tableData);
      // this.loading = false
    },
    // 分支机构编辑按钮
    jghandleEdit(index, row) {
      this.index = index
      window.console.log(index, row);
      this.jgformData = JSON.parse(JSON.stringify(row));
      this.jgdialogFormVisible = true;
    },
    // 删除分支机构
    deletejg (index, row) {
      this.$confirm('是否删除此条机构数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        var index = this.tableData.jg.indexOf(row)
        if (index !== -1) {
          this.tableData.jg.splice(index, 1)
          console.log(this.tableData);
        }
        const { data: res } = await this.$http.post('/data/set',
          qs.stringify({
            view: '用户管理',
            code: 'wzwh',
            data: JSON.stringify({
              fz: 1,
              sz: this.tableData
            })
          })
        )
        if(res.code == "0"){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }else{
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        }
        this.homeData()
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除!'
        });
      })
    },
    // 删除发展历程
    deletefz (index, row) {
      this.$confirm('是否删除此条历程数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        var index = this.tableData.fz.indexOf(row)
        if (index !== -1) {
          this.tableData.fz.splice(index, 1)
          console.log(this.tableData);
        }
        const { data: res } = await this.$http.post('/data/set',
          qs.stringify({
            view: '用户管理',
            code: 'wzwh',
            data: JSON.stringify({
              fz: 1,
              sz: this.tableData
            })
          })
        )
        this.homeData()
        if(res.code == "0"){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }else{
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除!'
        });
      })
    },
    // 分支机构确认修改按钮
    async handleCreateOrModify() {
      if (this.index !== -1) {
        this.tableData.jg[this.index]=this.jgformData
      }
      console.log(this.tableData);
      const { data: res } = await this.$http.post('/data/set',
        qs.stringify({
          view: '用户管理',
          code: 'wzwh',
          data: JSON.stringify({
            fz: 1,
            sz: this.tableData
          })
        })
      )
      this.homeData()
      this.jgdialogFormVisible = false
      if(res.code=="0"){
        this.$message({
          type: 'success',
          message: '修改成功!'
        });
      }else{
        this.$message({
          type: 'error',
          message: '修改失败!'
        });
      }
      
      // if (!this.formData.Id) {
      //   // ID 无效时 视为新增
      //   this.loading = true;
      //   this.$http
      //     .post("Course/CreateCourse", this.formData, this.options)
      //     .then(response => {
      //       this.loading = false;
      //       window.console.log(response);
      //       this.$message({
      //         message: "创建成功！",
      //         type: "success"
      //       });
      //       this.dialogFormVisible = false;
      //       this.loadData();
      //     })
      //     .catch(e => {
      //       this.$message({
      //         message: "网络或程序异常！" + e,
      //         type: "error"
      //       });
      //     });
      // } else {
      //   this.loading = true;
      //   this.$http
      //     .post("Course/ModifiedCourse", this.formData, this.options)
      //     .then(response => {
      //       this.loading = false;
      //       window.console.log(response);
      //       this.$message({
      //         message: "修改成功！",
      //         type: "success"
      //       });
      //       this.dialogFormVisible = false;
      //       this.loadData();
      //     })
      //     .catch(e => {
      //       this.$message({
      //         message: "网络或程序异常！" + e,
      //         type: "error"
      //       });
      //     });
      // }
    },
    // 发展历程编辑按钮
    fzhandleEdit(index, row) {
      this.index = index
      window.console.log(index, row);
      this.fzformData = JSON.parse(JSON.stringify(row));
      this.fzdialogFormVisible = true;
    },
    // 发展历程确认修改按钮
    async fzmodify() {
      if (this.index !== -1) {
        this.tableData.fz[this.index]=this.fzformData
      }
      console.log(this.tableData);
      const { data: res } = await this.$http.post('/data/set',
        qs.stringify({
          view: '用户管理',
          code: 'wzwh',
          data: JSON.stringify({
            fz: 1,
            sz: this.tableData
          })
        })
      )
      this.homeData()
      this.fzdialogFormVisible = false
      if(res.code == "0"){
        this.$message({
          type: 'success',
          message: '修改成功!'
        });
      }else{
        this.$message({
          type: 'error',
          message: '修改失败!'
        });
      }
      
    },
    // 公司简介修改
    gsjjEdit() {
      this.$confirm('确定修改公司简介吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.tableData.jj = this.gsjj
        console.log(this.tableData);
        const { data: res } = await this.$http.post('/data/set',
          qs.stringify({
            view: '用户管理',
            code: 'wzwh',
            data: JSON.stringify({
              fz: 1,
              sz: this.tableData
            })
          })
        )
        this.homeData()
        if(res.code=="0"){
            this.$message({
            type: 'success',
            message: '修改成功!'
          });
        }
      }).catch(() => {
        this.homeData()
        this.$message({
          type: 'info',
          message: '已取消修改'
        });          
      });
    },
    newlyaddedjg(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          this.tableData.jg.push(this.addjg)
          try {
            const { data: res } = await this.$http.post('/data/set',
              qs.stringify({
                view: '用户管理',
                code: 'wzwh',
                data: JSON.stringify({
                  fz: 1,
                  sz: this.tableData
                })
              })
            )
            this.homeData()
            if(res.code=="0"){
              this.$message({
                type: 'success',
                message: '新建成功!'
              });
            }else{
              this.$message({
                type: 'error',
                message: '新建失败!'
              });
            }
            this.addjgdialogFormVisible = false
            this.addjg = {}
          } catch (error) {
            this.$message({
              type: 'error',
              message: '新建失败!'+error
            });
          }
        }
      });
    },
    newlyaddedfz(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.tableData.fz.push(this.addfz)
          try {
            const { data: res } = await this.$http.post('/data/set',
              qs.stringify({
                view: '用户管理',
                code: 'wzwh',
                data: JSON.stringify({
                  fz: 1,
                  sz: this.tableData
                })
              })
            )
            this.homeData()
            if(res.code=="0"){
              this.$message({
                type: 'success',
                message: '新建成功!'
              });
            }else{
              this.$message({
                type: 'error',
                message: '新建失败!'
              });
            }
            this.addfzdialogFormVisible = false
            this.addfz = {}
          } catch (error) {
            this.$message({
              type: 'error',
              message: '新建失败!'+error
            });
          }
        }
      });
    },
    // 重置表单校验
    jgReset() {
      this.$refs.addjg.resetFields();
    },
    fzReset() {
      this.$refs.addfz.resetFields();
    }
  }
}
</script>

<style scoped lang='scss'>
  /deep/.el-input__inner{
    width: 80%;
  }
  /deep/.el-dialog{
    border-radius: 20px;
    .el-dialog__header{
      border-radius: 20px 20px  0 0;
      background-color: skyblue;
      .el-dialog__title{
        font-weight: 600;
        color: white;
      }
    }
  }
</style>